/**
图形插件组件
 */
<template>
  <div class="line1">
    <div id="line1" class style="width: 90%;height:450px;"></div>
  </div>
</template>

<script>
// https://echarts.baidu.com/option.html#xAxis.boundaryGap
import echarts from "echarts/lib/echarts";
// 按需引入柱状图
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/tooltip";
export default {
  data() {
    return {};
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("line1"));
    this.initData();
  },
  // 接受父组件的数据
  props: ["sevenDate", "sevenDay"],
  methods: {
    initData() {
      // 颜色
      const colors = ["#5793f3", "#675bba", "#d14a61"];
      const option = {
        // 颜色
        color: colors,
        // 题头
        title: {
          text: "走势图",
          subtext: ""
        },
        // 提示框
        tooltip: {
          // 触发类型
          // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          trigger: "axis"
        },
        // 图例组件，头部的提示组件
        legend: {
          data: ["新注册用户", "新增订单", "新增管理员"]
        },
        // 工具栏
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            // 控制不可编辑
            dataView: { readOnly: false },
            // 启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）
            magicType: { type: ["bar", "line"] },
            // 配置项还原。
            restore: {}
          }
        },
        // x 轴
        xAxis: {
          // 坐标轴类型。
          // 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
          type: "category",
          // 关闭旁白
          boundaryGap: false,
          // 数据
          data: this.sevenDay
        },
        // y轴
        yAxis: [
          // 左侧
          {
            // 'value' 数值轴，适用于连续数据
            type: "value",
            // 坐标名称
            name: "用户",
            // 大小值
            min: 0,
            max: 200,
            // 左
            position: "left",
            // 坐标轴颜色
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            // 刻度标签的内容格式器
            axisLabel: {
              formatter: "{value}"
            }
          },
          // 右侧
          {
            type: "value",
            name: "订单",
            min: 0,
            max: 200,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        // 数据
        series: [
          {
            name: "新注册用户",
            type: "line",
            data: this.sevenDate[0],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "新增订单",
            type: "line",
            data: this.sevenDate[1],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "新增管理员",
            type: "line",
            data: this.sevenDate[2],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          }
        ]
      };
      this.myChart.setOption(option);
    }
  },
  // 数据监听，动态改变
  watch: {
    sevenDate: function() {
      // eslint-disable-next-line no-console
      // console.log(this)
      this.initData();
    },
    sevenDay: function() {
      this.initData();
    }
  }
};
</script>

<style lang="less">
@import "../assets/styles/mixin.less";
.line1 {
  display: flex;
  justify-content: center;
}
</style>